<template>
    <el-input v-model="name" style="width: 240px;margin-left: 10px;" placeholder="Please input" />
    <el-button type="primary" @click="Share" plain>屏幕共享</el-button>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="name" label="名称" width="150">
        </el-table-column>
        <el-table-column prop="count" label="在线人数" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">

                <el-button @click="insertShare(scope.row)" type="text" size="small">加入</el-button>
                <el-button @click="delShare(scope.row)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="centerDialogVisible" width="90%" style="margin-left:10vw ;" title="Chat" align-center
        @closed="closed" destroy-on-close :before-close="handleClose">
        <SharePage :shareName="shareName" v-if="show"></SharePage>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { videoStore } from '@/store/video'
import { SignalrStore } from '@/store/signalrStore'
import SharePage from '@/components/sharePull.vue'
import { ElMessageBox } from 'element-plus'
var tableData = ref([]);
var name = ref();
var shareName = ref();
const centerDialogVisible = ref(false);
var show = ref(true);
var urlData = null;
const closed = async () => {
    var id = videoStore().getId();
    show.value = false;
    centerDialogVisible.value = false;
    debugger
    var res = await fetch(urlData.apiUrl + "/RemoveUserFromShare?Id=" + id + '&GroupName=' + shareName.value);
}
const delShare = async (data) => {
    var res = await fetch(urlData.apiUrl + "/RemoveShare?Name=" + data.name);
}

const handleClose = (done) => {
    ElMessageBox.confirm('是否退出共享?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const insertShare = async (data) => {
    var id = videoStore().getId();
    var names = data.name;
    var data = {
        Name: names,
        Id: id
    }
    var res = await fetch(urlData.apiUrl + "/AddShare", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    show.value = true;
    shareName.value = names;
    centerDialogVisible.value = true;
}
const Share = async () => {
    var id = videoStore().getId();
    var data = {
        Name: name.value,
        Id: id
    }
    var res = await fetch(urlData.apiUrl + "/AddShare", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    centerDialogVisible.value = true; shareName.value = name.value;
    show.value = true;
}
onMounted(async () => {
    try {
        var res = await fetch('/configjs.json?d=' + new Date());
        urlData = await res.json();
        var user = await fetch(urlData.apiUrl + "/GetShare");
        tableData.value = await user.json();
        var con = SignalrStore().getSignalrInstance();
        SignalrStore().getSignalrInstance().on("ShareChange", (datas) => {
            tableData.value = datas
            console.log(datas);
        });
        SignalrStore().getSignalrInstance().on("CloseShare", () => {

            centerDialogVisible.value = false;
            show.value = false;
        });
        SignalrStore().getSignalrInstance().on("ShareDisplay", () => {
        });
    } catch (error) {
        console.error(error);
    }
})
</script>